<template>
  <div class="content_padding">
    <div class="container" style="position: fixed; top: 0;left: 0;">
      <span class="staffTitle">添加设备</span>
      <div class="btn">
        <el-button type="text" icon="icon iconfont iconfanhui" @click="returnPage">返回</el-button>
        <el-button type="text" icon="el-icon-position" @click="addPointInfo">提交</el-button>
      </div>
    </div>

    <div class="info-wrap">
      <div class="info-modal">
        <span class="text">标段：</span>
        <el-select style="width: 140px;" size="medium" placeholder="请选择" v-model="form.bidSection" clearable>
          <el-option
            v-for="item in biaoduanList"
            :key="item.id"
            :label="item.name"
            :value="item.name">
          </el-option>
        </el-select>
      </div>
      <div class="info-modal">
        <span class="text">进场编号：</span>
        <el-input style="width: 140px;" size="medium" placeholder="请输入"
                  v-model.trim="form.mobilizationSerialNumber"></el-input>
      </div>
      <div class="info-modal">
        <span class="text">设备类型：</span>
        <el-select style="width: 140px;" size="medium" placeholder="请选择" v-model="form.deviceType" clearable>
          <el-option
            v-for="item in deviceType"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="info-modal">
        <span class="text">设备来源：</span>
        <el-select style="width: 140px;" size="medium" placeholder="请选择" v-model="form.deviceSource" clearable>
          <el-option
            v-for="item in deviceLaiyuan"
            :key="item.value"
            :label="item.label"
            :value="item.label">
          </el-option>
        </el-select>
      </div>

      <el-button type="primary" size="medium" icon="el-icon-search" style="margin-left:40px" @click="queryListData">查询
      </el-button>
    </div>

    <div class="table-wrap">
      <div class="hint-text">提示：请通过筛选条件查询需要添加的设备！</div>
      <el-table
        :data="pointList"
        :height="tableHeight"
        size="small"
        style="width: 100%;"
        v-loading="loading"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="No" :index="indexMethod"></el-table-column>
        <el-table-column prop="bidSection" label="标段"></el-table-column>
        <el-table-column prop="deviceCnName" label="设备名称"></el-table-column>
        <el-table-column prop="deviceTypeName" label="设备类型"></el-table-column>
        <el-table-column prop="model" label="规格型号"></el-table-column>
        <el-table-column prop="examinationNumber" label="报审表编号"></el-table-column>
        <el-table-column prop="deviceSource" label="设备来源"></el-table-column>
        <el-table-column label="设备验收">
          <template slot-scope="scope">
            <span>{{ scope.row.entryStatus == 1 ? "已进场" : "已退场" }}</span>
          </template>
        </el-table-column>
      </el-table>
      <Pagination :pageData="pageData" @pageNum="pageNumData" @pageSize="pageSizeData"></Pagination>
    </div>
  </div>
</template>

<script>
import Pagination from "../components/Pagination";
import HttpInterface from "../../util/httpInterface";
import eventBus from "../../util/eventBus";
import { mapState } from "vuex";
import Constants from "../../util/constants";

export default {
  name: "AddDevicePointModel",
  components: { Pagination },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      tableHeight: 0,
      pointList: [],
      addPointList: [],
      form: {
        bidSection: "",
        mobilizationSerialNumber: "",
        deviceType: "",
        deviceSource: "",
      },
      deviceType: [
        {value: '1-1', label: "一般设备"},
        {value: '1-2', label: "主要设备"},
        {value: '1-3', label: "特种设备"},
        {value: '1-4', label: "关键设备"},
      ],
      deviceLaiyuan: [
        {value: '1', label: "自有"},
        {value: '2', label: "租凭"},
      ],
      pageData: {
        total: 0,
        pageNum: 1,
        pageSize: 20
      }
    }
  },

  computed: {
    ...mapState(["biaoduanList"])
  },

  created() {
    this.getTableHeight();
  },

  mounted() {
    let _this = this;
    let resizeFlag = null;
    window.onresize = () => {
      resizeFlag && clearTimeout(resizeFlag);
      resizeFlag = setTimeout(() => {
        _this.getTableHeight();
        resizeFlag = null;
      }, 120);
    };
  },

  destroyed() {
    window.onresize = null;
  },

  methods: {
    // 返回
    returnPage() {
      this.$parent.showPage = 0;
      this.$parent.refreshListData();
    },

    getTableHeight() {
      let tableH = 250;
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    },

    indexMethod(index) {
      return index + 1;
    },

    pageNumData(page) {
      this.pageData.pageNum = Number(page);
      this.queryListData();
    },

    pageSizeData(page) {
      this.pageData.pageSize = Number(page);
      this.queryListData();
    },

    tableRowClassName({row}) {
      if (row.entryStatus != 1) {
        return 'warning-row';
      }
      return '';
    },

    // 条件筛选
    queryListData() {
      this.loading = true;
      let _this = this;
      let {bidSection, deviceSource, deviceType, mobilizationSerialNumber} = this.form;
      let searchMap = {
        page: this.pageData.pageNum,
        size: this.pageData.pageSize,
        bidSection: bidSection,
        deviceSource: deviceSource,
        deviceType: deviceType,
        mobilizationSerialNumber: mobilizationSerialNumber
      };
      HttpInterface.requestPost(this, HttpInterface.URL_DEVICE_FIND_PAGE, searchMap, function (res) {
        let data = res.data;
        if (data.success) {
          let rows = data.other.rows;
          rows.forEach(item => {
            item.deviceTypeName = Constants.DEVICE_TYPE_LIST[item.deviceType]
          })
          rows.sort(function (a, b) {
            return b.entryStatus - a.entryStatus;
          })
          _this.pointList = rows;
          _this.pageData.total = data.other.total;
        } else {
          _this.errorMessage("获取数据失败！");
        }
        _this.loading = false;
      }, function (err) {
        _this.loading = false;
        _this.errorMessage("获取数据失败！");
      }, false)
    },

    handleSelectionChange(val) {
      this.addPointList = val;
    },

    // 添加检定信息
    addPointInfo() {
      if (this.addPointList.length == 0) return this.warningMessage('请选择需要添加的设备！');
      let _this = this;
      let params = {
        mechanicalDevices: this.addPointList
      };
      HttpInterface.requestPost(this, HttpInterface.URL_VERIFICATION_INSERT_FOREACH, params, function (res) {
        let data = res.data;
        if (data.success) {
          _this.successMessage("添加成功！");
          _this.$parent.$data.showPage = 0;
          _this.$parent.refreshListData();
        } else {
          _this.errorMessage(data.msg);
        }
      }, null, false)
    }
  }
}
</script>

<style scoped lang="scss">
.info-wrap {
  display: flex;
  margin-top: 90px;

  .info-modal {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 30px;

    .text {
      font-size: 14px;
      margin-right: 4px;
      width: 70px;
      display: inline-block;
      text-align: right;
    }
  }
}

.table-wrap {
  margin-top: 10px;
  padding: 0 20px;

  .hint-text {
    font-size: 13px;
    color: #f55f5f;
    margin-left: 8px;
    margin-bottom: 20px;
  }
}

.el-button--text >>> .iconfanhui {
  margin-right: 4px;
  font-size: 18px;
  vertical-align: -2px;
}

.el-table > > > .warning-row {
  background: #fdf5e6;
}
</style>
